[AngularJS] UI.Sortable を使ったドラッグ＆ドロップ UI の構築

たいが

2015.10.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

angularjs125title 車輪開発大好きおたいがです。こんにちは。( 挨拶 )

AngularUI プロジェクトには UI.Sortable というサブプロジェクトがあります。このプロジェクトは jQuery UI Sortable を AngularJS 用にカスタマイズしたものが置かれていますが、その中の一例を実務で採用したので使用方法をまとめておきました。

導入

bower または npm でソースを取得します。

bower install -S angular-ui-sortable

npm install -S angular-ui-sortable

( -S は --save と同義 )

依存関係

jQuery
jQueryUI 1.9+
AngularJS v1.2+

jQuery, jQueryUI が必要になるので <script> 要素の記述を忘れないように気を付けましょう。

定義

bower で導入したときの例 (HTML)

jQuery, jQueryUI, AngularJS …の定義順で。

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
…
<script src="bower_components/angular-ui-sortable/sortable.min.js"></script>

モジュールの定義 (JavaScript)

ui.sortable モジュールを導入します。

angular.module('sampleApp', ['ui.sortable', …], function(…)

実装例

tbody の行をドラッグ＆ドロップするサンプルを例に説明を進めます。

ドラッグさせたい要素の親要素にて ui-sortable 属性値を定義します。このとき親子関係を保つ必要があります。 ( 先祖-子孫関係では動作に不具合が生じるので注意が必要です ) 属性値には jQuery UI Sortable の全オプションを定義することが可能です。

ドラッグのつまみ役を担う DOM のセレクタ名を設定する handle プロパティや、開始、終了時のハンドラ ( 関数 ) を設定する start stop プロパティは使用頻度が高いものと思われます。

HTML

<tbody ui-sortable="ctrl.sortableOptions">
  <tr ng-repeat="item in ctrl.items">
    <td class="drag-cursor" data-js="drag__handle">
      <span class="glyphicon glyphicon-menu-hamburger"></span>
    </td>
    <td>{{item.label}}</td>
  </tr>
</tbody>

CSS

.drag-cursor {
  cursor: move;
}

JavaScript

ctrl.sortableOptions = {
  'handle' : '[data-js=drag__handle]',
  'axis '  : 'y',
  'start'  : function(event, ui) {
    ui.item.startPos = ui.item.index();
  },
  'stop'   : function(event, ui) {
    var startPos = ui.item.startPos;
    var endPos   = ui.item.index();
    if(!angular.equals(startPos, endPos)) {
      var rowData = ctrl.items[startPos];
      ctrl.items.splice(startPos, 1);
      ctrl.items.splice(endPos, 0, rowData);
      $scope.$apply();
    }
  }
};